<template>
    <ElTable class="list-table is-border" :="$attrs" height="720" :span-method="spanMethod" border :data="list">
        <ElTableColumn label="客户名称" prop="khmc" width="150">
            <template #default="{ row }">
                <span style="font-weight: bold">{{ row.khmc }}</span>
            </template>
        </ElTableColumn>
        <ElTableColumn label="店铺名称" prop="dpmc" width="200">
            <template #default="{ row }">
                <span style="font-weight: bold">{{ row.dpmc }}</span>
            </template>
        </ElTableColumn>
        <ElTableColumn label="店铺平台" prop="dpptName" align="center" width="85"></ElTableColumn>
        <ElTableColumn label="业务名称" prop="ywmc" width="200">
            <template #default="{ row }">
                <span style="font-weight: bold">{{ row.ywmc }}</span>
            </template>
        </ElTableColumn>
        <ElTableColumn label="业务条线" prop="ywtxName" align="center" width="100"></ElTableColumn>
        <ElTableColumn label="业务类型" prop="ywlxName" align="center" width="158"></ElTableColumn>
        <ElTableColumn label="服务班次" prop="fwbcName" align="center" width="200"></ElTableColumn>
        <ElTableColumn label="服务类型" prop="fwlxName" align="center" width="180"></ElTableColumn>
        <ElTableColumn label="收费模式" prop="sfmsName" align="center" width="150"></ElTableColumn>
        <ElTableColumn label="咨询量" prop="zxlSum" align="center" width="70"></ElTableColumn>
        <ElTableColumn label="业务底薪" prop="ywdx" align="center" width="85"></ElTableColumn>
        <ElTableColumn label="税后业务底薪" prop="shYwdx" align="center" width="85"></ElTableColumn>
        <ElTableColumn label="提成点数(%)" prop="tcds" align="center" width="110"></ElTableColumn>
        <ElTableColumn label="业务开始时间" prop="ywkssj" align="center" width="120"></ElTableColumn>
        <ElTableColumn label="业务结束时间" prop="ywjssj" align="center" width="120"></ElTableColumn>
        <ElTableColumn label="ERP操作" prop="erpczName" align="center" width="85"></ElTableColumn>
        <ElTableColumn label="运仓对接" prop="ycdjName" align="center" width="85"></ElTableColumn>
        <ElTableColumn label="业务合作状态" prop="ywhzztName" align="center" width="110"></ElTableColumn>
        <ElTableColumn label="业务备注" prop="ywbz" width="100">
            <template #default="{ row }">
                <div class="ellipsis-cell">{{ row.ywbz }}</div>
            </template>
        </ElTableColumn>
        <ElTableColumn label="转化率" prop="zhl" align="center" width="70"></ElTableColumn>
        <ElTableColumn label="平均响应" prop="pjxy" align="center" width="85"></ElTableColumn>
        <ElTableColumn label="满意度" prop="myd" align="center" width="70"></ElTableColumn>
        <ElTableColumn label="退款时长" prop="tksc" align="center" width="85"></ElTableColumn>

        <!-- <ElTableColumn label="是否开票" prop="sfkpName" width="100"></ElTableColumn>
        <ElTableColumn label="发票类型" prop="fplxName" width="100"></ElTableColumn>
        <ElTableColumn label="票面税点" prop="pmsdName" width="100"></ElTableColumn>
        <ElTableColumn label="开票节点" prop="kpjdName" width="100"></ElTableColumn>
        <ElTableColumn label="公司名称" prop="gsmc" width="100">
            <template #default="{ row }">
                <div class="ellipsis-cell">{{ row.gsmc }}</div>
            </template>
        </ElTableColumn>
        <ElTableColumn label="统一社会信用代码" prop="tyshxydm" width="100">
            <template #default="{ row }">
                <div class="ellipsis-cell">{{ row.tyshxydm }}</div>
            </template>
        </ElTableColumn>
        <ElTableColumn label="银行账号" prop="yhzh" width="100">
            <template #default="{ row }">
                <div class="ellipsis-cell">{{ row.yhzh }}</div>
            </template>
        </ElTableColumn>
        <ElTableColumn label="开户银行" prop="khyh" width="100">
            <template #default="{ row }">
                <div class="ellipsis-cell">{{ row.khyh }}</div>
            </template>
        </ElTableColumn>
        <ElTableColumn label="联行号" prop="lhh" width="100">
            <template #default="{ row }">
                <div class="ellipsis-cell">{{ row.lhh }}</div>
            </template>
        </ElTableColumn>
        <ElTableColumn label="公司地址" prop="gsdz" width="100">
            <template #default="{ row }">
                <div class="ellipsis-cell">{{ row.gsdz }}</div>
            </template>
        </ElTableColumn>
        <ElTableColumn label="邮箱" prop="youxiang" width="100">
            <template #default="{ row }">
                <div class="ellipsis-cell">{{ row.youxiang }}</div>
            </template>
        </ElTableColumn>
        <ElTableColumn label="公司承担比例(%)" prop="gscdbl" width="100"></ElTableColumn> -->

        <ElTableColumn prop="_action" label="操作" fixed="right" :min-width="90" header-align="center" align="center">
            <template #default="{ row }">
                <ElButton type="primary" link @click="$emit('edit-yw', row)">编辑</ElButton>
            </template>
        </ElTableColumn>
    </ElTable>
</template>

<script setup lang="ts">
import { ElTableColumn } from 'element-plus';
import { ref, computed, onMounted } from 'vue'
import { addRowAndColSpan } from '@/utils/zeo'
interface Props {
    data?: any[],
}

const props = withDefaults(defineProps<Props>(), {
    data: () => []
})

const list = computed(() => {
    let l = []
    // 取客户数据
    props.data.forEach((child1) => {
        // 取店铺数据
        const shopList = child1.customerShopList;
        shopList.forEach((child2) => {
            const shopBusiness = child2.customerShopBusinessList;
            if (shopBusiness.length === 0) {
                l.push({
                    ...child1,
                    ...child2,
                })
            } else {
                shopBusiness.forEach((child3) => {
                    l.push({
                        ...child1,
                        ...child2,
                        ...child3,
                    })
                })
            }
        })
    });
    // 开始处理合并
    l = addRowAndColSpan(l, 'customerId', 'rowspan1', 'colspan1');
    l = addRowAndColSpan(l, 'customerShopId', 'rowspan2', 'colspan2');
    l = processData(l);
    console.log(l);
    return l;
})

const level1 = [
    'khmc'
]

const level2 = [
    'dpmc', 'dpptName', '_action'
]

const spanMethod = ({ row, column }) => {
    if (level1.includes(column.property)) {
        return {
            rowspan: row.rowspan1,
            colspan: row.colspan1
        }
    } else if (level2.includes(column.property)) {
        return {
            rowspan: row.rowspan2,
            colspan: row.colspan2
        }
    }
}

// 处理函数
function processData(data) {
    const seen = new Map(); // 记录已出现的 customerId + sfmsVal 组合
    console.log(data);
    return data.map(item => {
        // 如果 sfmsVal 是 "单独收费" 或 "无需收费"，则不做处理
        if (item.sfmsVal === "单独收费" || item.sfmsVal === "无需收费") {
            return item;
        }

        // 如果 customerId 或 sfmsVal 为空，则跳过处理，直接返回 item
        if (item.customerId == null || item.sfmsVal == null) {
            return item;
        }

        const key = `${item.customerId}-${item.sfmsVal}`;
        const result = { ...item }; // 创建副本以避免直接修改原对象

        if (seen.has(key)) {
            // 如果已经出现过这个组合，将两个字段都设为 "0"（如果存在）
            if ('ywdx' in result) result.ywdx = "0";
            if ('zxl' in result) result.zxl = "0";
            if ('shYwdx' in result) result.shYwdx = "0";

        } else {
            // 第一次出现这个组合，记录下来
            seen.set(key, true);
            // 如果字段是空的（undefined 或 null），设为 "0"
            if (result.ywdx == null) result.ywdx = "0";
            if (result.zxl == null) result.zxl = "0";
            if (result.shYwdx == null) result.shYwdx = "0";
        }

        return result;
    });
}


onMounted(() => {
    /*
    setTimeout(() => {
        console.log(props.data);
    }, 2000); 
    */
})

</script>

<style scoped lang="scss">
.ellipsis-cell {
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    max-width: 200px;
    /* 设置一个最大宽度，根据需要调整 */
}
</style>